<template>
	<view class="container">
		<!-- 学生信息 -->
		<view class="student-info">
			<!-- <text class="student-name">姓名: {{ student.name }}</text>
			<text class="student-id">学号: {{ student.student_id }}</text> -->
			<text class="student-name">姓名: {{ student.name || '未知学生' }}</text>
			<text class="student-id">学号: {{ student.student_id || '未知学号' }}</text>
			<!-- <text style="font-size: 18px;color: #666;margin-left: 30rpx;" @click="GoAll()">Go</text> -->
		</view>
		<!-- ECharts折线图 -->
		<view style="width:750rpx; height:750rpx"><l-echart ref="chartRef" @finished="init"></l-echart></view>
		<!-- 学生每周成绩和排名的表格 -->
		<view class="table-container">
			<table class="score-table">
				<thead>
					<tr>
						<th>周数</th>
						<th>分数</th>
						<th>分变化</th>
						<th>排名</th>
						<th>名变化</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="week in weeks" :key="'detail-' + week">
						<!-- <td>第{{ week }}周</td> -->
						<td style="font-weight: 700;">{{ week }}</td>
						<td>{{ getScore(student.weeks, week) }}</td>
						<td>
							<span v-if="getScoreChange(week) < 0" style="color: #67C23A;">
								↓{{ Math.abs(getScoreChange(week)) }}</span>
							<span v-else-if="getScoreChange(week) > 0" style="color: red;">↑
								{{ Math.abs(getScoreChange(week)) }}</span>
							<span v-else>{{ getScoreChange(week) }}</span>
						</td>
						<td>{{ getRanking(student.weeks, week) }}</td>
						<td>
							<span v-if="getRankingChange(week) < 0" style="color: red;">↑
								{{ Math.abs(getRankingChange(week)) }}</span>
							<span v-else-if="getRankingChange(week) > 0" style="color: #67C23A;">↓
								{{ Math.abs(getRankingChange(week)) }}</span>
							<span v-else>{{ getRankingChange(week) }}</span>
						</td>

					</tr>
				</tbody>
			</table>
		</view>
	</view>
</template>


<style scoped>
	.container {
		padding: 20px;
		background-color: #f8f9fa;
		border-radius: 10px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	}

	.student-info {
		margin-bottom: 20px;
		padding: 15px;
		background-color: #ffffff;
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.student-name {
		font-size: 18px;
		font-weight: bold;
		color: #333;
	}

	.student-id {
		font-size: 14px;
		color: #666;
		margin-left: 10px;
	}

	.table-container {
		margin-top: 20px;
		background-color: #ffffff;
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		overflow-x: auto;
		/* 支持横向滚动 */
	}

	.score-table {
		width: 100%;
		border-collapse: collapse;
		text-align: center;
	}

	.score-table th,
	.score-table td {
		padding: 12px;
		border: 1px solid #e4e7ed;
	}

	.score-table th {
		background-color: #f8f9fa;
		font-weight: bold;
		color: #333;
	}

	.score-table tbody tr:nth-child(even) {
		background-color: #f8f9fa;
	}

	.score-table tbody tr:hover {
		background-color: #e9ecef;
	}
</style>

<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	export default {
		data() {
			return {
				canvasWidth: 600, // 根据实际内容宽度调整
				canvasHeight: 400, // 根据行数动态计算
				student: {},
				weeks: []
			};
		},
		onLoad(options) {
			if (options.name) {
				// 从本地缓存获取数据
				this.student = uni.getStorageSync(options.name);
				this.weeks = uni.getStorageSync('周数');
			} else {
				console.error("Failed to load parameters.");
			}
		},
		methods: {
			GoAll() {
				uni.navigateTo({
					url: '/pages/index/myCharts?name=' + this.student.name,
					animationType: 'fade-in',
					animationDuration: 200
				});
			},
			async init() {
				// chart 图表实例不能存在data里
				const chart = await this.$refs.chartRef.init(echarts);
				// chart.setOption(this.option)
				// 处理数据
				const xAxisData = this.weeks.map(week => week); // 横轴: 周数
				const scoreData = this.weeks.map(week => {
					const score = this.getScore(this.student.weeks, week);
					return score !== 'N/A' ? score : 0; // 如果没有分数，则使用0
				});

				// 配置图表
				const option = {
					title: {
						text: '学生每周成绩变化',
						left: 'center'
					},
					tooltip: {
						trigger: 'axis'
					},
					xAxis: {
						type: 'category',
						data: xAxisData
					},
					yAxis: {
						type: 'value',
						name: '分数'
					},
					series: [{
						data: scoreData,
						type: 'line',
						// smooth: true,//曲线
						lineStyle: {
							color: '#5470C6'
						},
						itemStyle: {
							color: '#5470C6'
						}
					}]
				};

				chart.setOption(option)
			},
			getScore(weeks, week) {
				const weekData = weeks.find(w => w.week === week);
				return weekData ? weekData.score : 'N/A';
			},
			getRanking(weeks, week) {
				const weekData = weeks.find(w => w.week === week);
				return weekData && weekData.ranking !== undefined ? weekData.ranking : 'N/A';
			},
			// 获取分数变化
			getScoreChange(week) {
				const currentWeekData = this.student.weeks.find((item) => item.week === week);
				if (!currentWeekData) return 0; // 如果当前周没有数据，返回 0

				// 找到当前周之前的最近一次有考试的数据
				let previousWeekData = null;
				for (let i = week - 1; i >= 1; i--) {
					previousWeekData = this.student.weeks.find((item) => item.week === i);
					if (previousWeekData) break; // 找到第一个有数据的周
				}

				if (!previousWeekData) {
					return '-'; // 如果找不到上一周有考试的数据，返回 '-'
				} else {
					return currentWeekData.score - previousWeekData.score; // 返回分数变化
				}
			},
			// 获取排名变化
			getRankingChange(week) {
				const currentWeekData = this.student.weeks.find((item) => item.week === week);
				if (!currentWeekData || currentWeekData.ranking === undefined) return '-'; // 如果当前周没有数据或没有排名，返回 '-'

				// 找到当前周之前的最近一次有排名的数据
				let previousWeekData = null;
				for (let i = week - 1; i >= 1; i--) {
					previousWeekData = this.student.weeks.find((item) => item.week === i && item.ranking !== undefined);
					if (previousWeekData) break; // 找到第一个有排名的数据周
				}

				if (!previousWeekData) {
					return '-'; // 如果找不到上一周有排名的数据，返回 '-'
				} else {
					return currentWeekData.ranking - previousWeekData.ranking; // 返回排名变化
				}
			}
			

		}
	};
</script>